<template>
  <view class="margin">
    <!-- 签到/退信息 -->
    <view class="bg-white radius-lg padding">
      <view class="flex align-center justify-between">
        <u-text color="#333" size="32rpx" text="签到/退信息"></u-text>
      </view>
      <view class="flex align-center justify-between margin-top-lg">
        <text class="point"></text>
        <u-text color="#333" size="28rpx" text="签到时间"></u-text>
        <u-text align="right" color="#666" size="28rpx" text="暂无签到信息"></u-text>
      </view>
      <u-divider></u-divider>
      <view class="flex align-center justify-between">
        <text class="point"></text>
        <u-text color="#333" size="28rpx" text="签退时间"></u-text>
        <u-text align="right" color="#666" size="28rpx" text="暂无签退信息"></u-text>
      </view>
    </view>

    <!-- 操作按钮组 -->
    <view class="flex margin-top-lg gap">
      <u-button size="large" customStyle="color:#0060E6" shape="circle" color="#EBF3FF" text="补签"
        @click="showLateCheckIn = true"></u-button>
      <u-button size="large" customStyle="color:#0060E6" shape="circle" color="#EBF3FF" text="迟到"
        @click="showLate = true"></u-button>
      <u-button size="large" customStyle="color:#0060E6" shape="circle" color="#EBF3FF" text="请假"
        @click="showAskLeave = true"></u-button>
    </view>

    <view class="btn-leave-early" hover-class="btn-leave-early-hover" @click="showLeaveEarly = true">
      早退
    </view>

    <!-- 补签弹窗 -->
    <up-popup :show="showLateCheckIn" @close="close">
      <view class="padding-lg">
        <view class="flex">
          <u-text bold align="center" color="#333" size="36rpx" text="补签"></u-text>
          <u-icon name="close" size="42rpx" color="#000" @click="close"></u-icon>
        </view>
        <view class="time-box">
          <u-text color="#333" size="26rpx" text="补签时间"></u-text>
          <u-text suffixIcon="arrow-down" iconStyle="margin:10rpx 0 0 10rpx;" align="right" :text="lateCheckInTime"
            color="#999" size="26rpx" @click="showDatetimePicker = true"></u-text>
        </view>
        <view class="margin-top">
          <u-text bold margin="0 0 20rpx 0 " color="#333" size="26rpx" text="补签原因"></u-text>
          <u-textarea style="background:#F7F7F7" v-model="lateCheckInReason" placeholder="请输入补签原因"
            maxlength="100"></u-textarea>
        </view>
        <view class="margin-top">
          <UploadBox v-model="lateCheckInImage"></UploadBox>
        </view>
        <view class="margin-top">
          <u-button size="large" shape="circle" :color="themePrimary" text="提交"
            @click="handleLateCheckInSubmit"></u-button>
        </view>
      </view>
    </up-popup>
    <!-- 迟到弹窗 -->
    <up-popup :show="showLate" @close="close">
      <view class="padding-lg">
        <view class="flex">
          <u-text bold align="center" color="#333" size="36rpx" text="迟到"></u-text>
          <u-icon name="close" size="42rpx" color="#000" @click="close"></u-icon>
        </view>
        <view class="margin-top">
          <u-text bold margin="0 0 20rpx 0 " color="#333" size="26rpx" text="迟到原因"></u-text>
          <u-textarea style="background:#F7F7F7" v-model="lateCheckInReason" placeholder="请输入迟到原因"
            maxlength="100"></u-textarea>
        </view>
        <view class="margin-top">
          <UploadBox v-model="lateCheckInImage"></UploadBox>
        </view>
        <view class="margin-top">
          <u-button size="large" shape="circle" :color="themePrimary" text="提交"
            @click="handleLateCheckInSubmit"></u-button>
        </view>
      </view>
    </up-popup>
    <!-- 请假弹窗 -->
    <up-popup :show="showAskLeave" @close="close">
      <view class="padding-lg">
        <view class="flex">
          <u-text bold align="center" color="#333" size="36rpx" text="请假"></u-text>
          <u-icon name="close" size="42rpx" color="#000" @click="close"></u-icon>
        </view>
        <view class="margin-top">
          <u-text bold margin="0 0 20rpx 0 " color="#333" size="26rpx" text="请假原因"></u-text>
          <u-textarea style="background:#F7F7F7" placeholder="请输入请假原因" v-model="askLeaveReason"
            maxlength="100"></u-textarea>
        </view>
        <view class="margin-top">
          <UploadBox v-model:modelValue="askLeaveImage"></UploadBox>
        </view>
        <view class="margin-top">
          <u-button size="large" shape="circle" :color="themePrimary" text="提交"
            @click="handleAskLeaveSubmit"></u-button>
        </view>
      </view>
    </up-popup>
    <!-- 早退弹窗 -->
    <up-popup :show="showLeaveEarly" @close="close">
      <view class="padding-lg">
        <view class="flex">
          <u-text bold align="center" color="#333" size="36rpx" text="早退"></u-text>
          <u-icon name="close" size="42rpx" color="#000" @click="close"></u-icon>
        </view>
        <view class="time-box">
          <u-text color="#333" size="26rpx" text="早退时间"></u-text>
          <u-text suffixIcon="arrow-down" iconStyle="margin:10rpx 0 0 10rpx;" align="right" :text="lateCheckInTime"
            color="#999" size="26rpx" @click="showDatetimePicker = true"></u-text>
        </view>
        <view class="margin-top">
          <u-text bold margin="0 0 20rpx 0 " color="#333" size="26rpx" text="早退原因"></u-text>
          <u-textarea style="background:#F7F7F7" v-model="leaveEarlyReason" placeholder="请输入早退原因"
            maxlength="100"></u-textarea>
        </view>
        <view class="margin-top">
          <UploadBox v-model="leaveEarlyImage"></UploadBox>
        </view>
        <view class="margin-top">
          <u-button size="large" shape="circle" :color="themePrimary" text="提交"
            @click="handleLeaveEarlySubmit"></u-button>
        </view>
      </view>
    </up-popup>

    <u-datetime-picker :show="showDatetimePicker" v-model="lateCheckInTime" mode="datetime"
      :minDate="dayjs().subtract(10, 'day').valueOf()" :maxDate="dayjs().valueOf()" @cancel="showDatetimePicker = false"
      @confirm="handleDatetimeConfirm"></u-datetime-picker>
  </view>
</template>
<script setup>
import { ref } from 'vue';
import UploadBox from '@/components/UploadBox/index.vue';//上传作业条图片
import dayjs from 'dayjs';
import { useTheme } from '@/composables/useTheme';//主题色

const { themePrimary } = useTheme();
const showLateCheckIn = ref(false)//补签弹窗
const showLate = ref(false)//迟到弹窗
const showAskLeave = ref(false)//请假弹窗
const showLeaveEarly = ref(false)//早退弹窗
const showDatetimePicker = ref(false)//时间选择器
const lateCheckInTime = ref('2025年12月12日 19:00')//补签时间
const askLeaveReason = ref('')//请假原因
const askLeaveImage = ref([])//请假图片


// 关闭弹窗
const close = () => {
  showLateCheckIn.value = false;
  showLate.value = false;
  showAskLeave.value = false;
  showLeaveEarly.value = false;
}

// 时间选择器确认
const handleDatetimeConfirm = (e) => {
  lateCheckInTime.value = dayjs(e.value).format('YYYY-MM-DD HH:mm');
  showDatetimePicker.value = false;
}

// 补签提交
const handleLateCheckInSubmit = () => {
  console.log('补签提交');
}

// 请假提交
const handleAskLeaveSubmit = () => {
  console.log('请假提交');
}
</script>
<style lang="scss" scoped>
.time-box {
  display: flex;
  border: solid 1px #D8D8D8;
  padding: 20rpx;
  margin-top: 30rpx;
  border-radius: 20rpx;
}

.btn-leave-early {
  width: 240rpx;
  height: 240rpx;
  background: #0060E6;
  box-shadow: 0rpx 2rpx 40rpx 0rpx rgba(0, 96, 230, 0.3);
  margin: 100rpx auto 0 auto;
  border-radius: 50%;
  color: white;
  font-size: 48rpx;
  text-align: center;
  line-height: 240rpx;

  &.disabled {
    background: #EEEEEE;
    color: #999999
  }
}

.btn-leave-early-hover {
  background: rgba(0, 96, 230, 0.3);
  color: white;
}

.point {
  width: 10rpx;
  height: 10rpx;
  background: #0060E6;
  border-radius: 50%;
  margin-right: 10rpx;
}
</style>